<template>
    <div class="silingsi">
        <div style="padding-top:166px">
            <img src="../img/编组.png" alt="">
            <p class="one-p">抱歉，您访问的页面不存在...</p>
            <p class="two-p">即将离开本页，<span class="one-span">{{time}}</span> 秒后自动返回</p>
            <button class="one-button" @click="routerBack">返回</button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            time : 5,
            timer : null
        }
    },
    mounted(){
        this.timmer()
    },
    beforeDestroy() {
            /**
             * 组件销毁之前判断定时器是否清除
             * 如未清除，应手动清除定时器
             */
        if (this.timer) {
            clearInterval(this.timer)
            this.timer = null
        }
    },
    methods: {
        timmer() {
            this.timer = setInterval(() => {
                if (this.time > 1) {
                    this.time--
                } else {
                    this.time--
                    clearInterval(this.timer)
                    this.routerBack()
                }
            }, 1000)
        },
        routerBack() {
            this.$router.push('/home')
        }
    }
}
</script>
<style scoped>
    .silingsi{
        text-align: center;
        /* width: 1200px; */
        min-height: 800px;
        background: #FFFFFF;
        box-shadow: 4px 4px 9px 0px rgba(0, 0, 0, 0.08);
        border-radius: 5px;
        margin-right: 22px;
    }
    .one-p{
        font-size: 20px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: #515A6E;
    }
    .two-p{
        font-size: 16px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: #D9D9D9;
    }
    .one-span{
        font-size: 16px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: #7A5FF7;
    }
    .one-button{
        width: 60px;
        height: 32px;
        background: #7A5FF7;
        border-radius: 3px;
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: #FFFFFF;
        line-height: 30px;
        cursor: pointer;
        border: none;
    }
    /* .el-span{
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: #FFFFFF;
        line-height: 60px;
    } */
</style>